<template>
    <div class="addAirPlan">
        <custom-dialog title="路灯时控方案配置" size="small" @dialogClose="dialogClose">
            <div class="topStep">
                <img src="@/assets/images/0927/step1.png" v-if="current == 1" />
                <img src="@/assets/images/0927/step2.png" v-if="current == 2" />
            </div>
            <div class="bottomContent">
                <div class="famc" v-if="current == 1">
                    <label>方案名称：</label>
                    <Input v-model="value" placeholder="请输入方案名称" style="width: 300px" />
                </div>
                <div class="settings" v-if="current == 1">
                    <div class="work">
                        <div class="item" style="width: 20%">
                            <label> 功率（W） </label>
                        </div>
                        <div class="item" style="width: 40%">
                            <label class="leftLabel"> 总功率（W） </label>
                            <el-input-number v-model="value2" :min="0" :max="10000" label="请选择" style="width: 120px"></el-input-number>
                        </div>
                        <div class="item" style="width: 40%">
                            <label class="leftLabel"> 恢复时间（分） </label>
                            <el-input-number v-model="value3" :min="0" :max="1000" label="请选择" style="width: 120px"></el-input-number>
                        </div>
                    </div>
                    <div class="work">
                        <div class="item" style="width: 20%">
                            <label> 光控阈值（LUX） </label>
                        </div>
                        <div class="item" style="width: 40%">
                            <label class="leftLabel"> 低于 </label>
                            <el-input-number v-model="value4" :min="0" :max="10000" label="请选择" style="width: 120px"></el-input-number>
                        </div>
                        <div class="item" style="width: 40%">
                            <label class="leftLabel"> 高于 </label>
                            <el-input-number v-model="value5" :min="0" :max="1000" label="请选择" style="width: 120px"></el-input-number>
                        </div>
                    </div>
                </div>
                <div class="settings" v-if="current == 2">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="秒" name="one">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form1.second"
                                            label="每秒"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form1.second"
                                            label="指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                        <div style="margin-left: 23px">
                                            <el-checkbox
                                                v-model="item.isCheck"
                                                v-for="item in timeRange"
                                                v-bind:key="item.value"
                                                @change="changeCheck"
                                                >{{ item.value }}</el-checkbox
                                            >
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="分钟" name="two">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form2.second"
                                            label="每分钟"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form2.second"
                                            label="指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                        <div style="margin-left: 23px">
                                            <el-checkbox
                                                v-model="item.isCheck"
                                                v-for="item in timeRange"
                                                v-bind:key="item.value"
                                                @change="changeCheck"
                                                >{{ item.value }}</el-checkbox
                                            >
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="小时" name="three">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form3.second"
                                            label="每小时"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form3.second"
                                            label="指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                        <div style="margin-left: 23px">
                                            <div style="margin-bottom: 10px">
                                                上午：
                                                <el-checkbox
                                                    style="margin-right: 5px; padding: 0"
                                                    v-model="item.isCheck"
                                                    v-for="item in amRange"
                                                    v-bind:key="item.value"
                                                    @change="changeCheck"
                                                    >{{ item.value }}</el-checkbox
                                                >
                                            </div>
                                            <div>
                                                下午：
                                                <el-checkbox
                                                    style="margin-right: 5px; padding: 0"
                                                    v-model="item.isCheck"
                                                    v-for="item in pmRange"
                                                    v-bind:key="item.value"
                                                    @change="changeCheck"
                                                    >{{ item.value }}</el-checkbox
                                                >
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="日" name="four">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form4.second"
                                            label="每日"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form4.second"
                                            label="指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                        <div style="margin-left: 23px; max-height: 200px; overflow: auto">
                                            <el-checkbox
                                                v-model="item.isCheck"
                                                v-for="item in dayRange"
                                                v-bind:key="item.value"
                                                @change="changeCheck"
                                                >{{ item.value }}</el-checkbox
                                            >
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="月" name="five">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form5.second"
                                            label="每月"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form5.second"
                                            label="指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                        <div style="margin-left: 23px">
                                            <el-checkbox
                                                style="margin-right: 15px; padding: 0"
                                                v-model="item.isCheck"
                                                v-for="item in monthRange"
                                                v-bind:key="item.value"
                                                @change="changeCheck"
                                                >{{ item.value }}</el-checkbox
                                            >
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="周" name="six">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form6.second"
                                            label="每天"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form6.second"
                                            label="指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                        <div style="margin-left: 23px">
                                            <el-checkbox
                                                style="margin-right: 10px; padding: 0"
                                                v-model="item.isCheck"
                                                v-for="item in weekRange"
                                                v-bind:key="item.value"
                                                @change="changeCheck"
                                                >{{ item.value }}</el-checkbox
                                            >
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="年" name="seven">
                            <div class="form">
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form7.second"
                                            label="不指定"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form7.second"
                                            label="每年"
                                            style="line-height: 36px; margin-right: 10px"
                                        ></el-radio>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="24">
                                        <el-radio
                                            v-model="form7.second"
                                            label="周期从"
                                            style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                                        ></el-radio>
                                        <el-input-number
                                            v-model="form7.ks"
                                            :min="2024"
                                            :max="3000"
                                            label="请选择"
                                            style="width: 120px"
                                        ></el-input-number>
                                        -
                                        <el-input-number
                                            v-model="form7.js"
                                            :min="2024"
                                            :max="3000"
                                            label="请选择"
                                            style="width: 120px"
                                        ></el-input-number>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <el-button type="primary" class="nextBtn" @click="dialogClose" v-if="current == 2" style="margin-left: 10px"
                    >完成</el-button
                >
                <el-button type="primary" class="nextBtn" @click="current = 1" v-if="current == 2">上一步</el-button>
                <el-button type="primary" class="nextBtn" @click="current = 2" v-if="current == 1">下一步</el-button>
            </div>
        </custom-dialog>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
export default {
    name: 'addAirPlan',
    components: {customDialog},
    data() {
        return {
            amRange: [],
            pmRange: [],
            dayRange: [],
            monthRange: [],
            weekRange: [],
            timeRange: [],
            activeName: 'one',
            form1: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form2: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form3: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form4: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form5: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form6: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1',
                xqj: '1'
            },
            form7: {
                second: '',
                js: '2025',
                ks: '2024'
            },
            tableData: [
                {
                    id: 1,
                    item: '秒',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 2,
                    item: '分钟',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 3,
                    item: '小时',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 4,
                    item: '日',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 5,
                    item: '月',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 6,
                    item: '周',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 7,
                    item: '年',
                    plan: '',
                    time: '',
                    set: ''
                }
            ],
            wdsnkq: 1,
            wdsnkqList: [
                {
                    label: '开启',
                    value: 1
                },
                {
                    label: '关闭',
                    value: 0
                }
            ],
            snyxfs: 1,
            snyxfsList: [
                {
                    label: '按天使能',
                    value: 1
                },
                {
                    label: '按月使能',
                    value: 0
                }
            ],
            kgjkz: 1,
            kgjkzList: [
                {
                    label: '制冷/制热关机',
                    value: 1
                },
                {
                    label: '制冷/制热开机',
                    value: 0
                }
            ],
            workMode: [],
            current: 1,
            value1: 28,
            value2: 1000,
            value3: 10,
            value4: 1000,
            value5: 1000,
            value6: 20,
            value7: '',
            value8: '',
            value9: '',
            value10: '',
            value11: '',
            value12: '',
            value13: 30
        }
    },
    computed: {},
    created() {},
    methods: {
        dialogClose() {
            this.$emit('dialogClose', '')
        }
    },
    mounted() {
        let timeRange = []
        for (let index = 0; index < 60; index++) {
            if (index < 10) {
                timeRange.push({
                    value: '0' + index,
                    isCheck: false
                })
            } else {
                timeRange.push({
                    value: index.toString(),
                    isCheck: false
                })
            }
        }
        this.timeRange = timeRange

        let amRange = []
        let pmRange = []
        let dayRange = []
        let monthRange = []
        let weekRange = [
            {
                value: '星期一',
                isCheck: false
            },
            {
                value: '星期二',
                isCheck: false
            },
            {
                value: '星期三',
                isCheck: false
            },
            {
                value: '星期四',
                isCheck: false
            },
            {
                value: '星期五',
                isCheck: false
            },
            {
                value: '星期六',
                isCheck: false
            },
            {
                value: '星期天',
                isCheck: false
            }
        ]
        for (let index = 0; index < 12; index++) {
            if (index < 10) {
                amRange.push({
                    value: '0' + index,
                    isCheck: false
                })
            } else {
                amRange.push({
                    value: index.toString(),
                    isCheck: false
                })
            }
        }
        for (let index = 12; index < 24; index++) {
            pmRange.push({
                value: index.toString(),
                isCheck: false
            })
        }
        for (let index = 1; index < 32; index++) {
            dayRange.push({
                value: index.toString(),
                isCheck: false
            })
        }
        for (let index = 1; index < 13; index++) {
            monthRange.push({
                value: index.toString(),
                isCheck: false
            })
        }
        this.amRange = amRange
        this.pmRange = pmRange
        this.dayRange = dayRange
        this.monthRange = monthRange
        this.weekRange = weekRange
    }
}
</script>

<style lang="scss" scoped>
.topStep {
    width: 100%;
    overflow: hidden;
}
.bottomContent {
    .famc {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .settings {
        margin-top: 10px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .leftLabel {
            width: 100px;
            display: inline-block;
            text-align: left;
        }
        .workMode {
            display: flex;
            width: 100%;
        }
        .work {
            margin-top: 10px;
            display: flex;
            width: 100%;
            gap: 10px;
            justify-content: center;
            align-items: center;
            .item {
                width: calc((100% - 10px) / 3);
            }
        }
        .timeSet {
            margin-top: 10px;
            display: flex;
            width: 100%;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
    }
    padding: 20px 0;
    .nextBtn {
        margin-top: 10px;
        float: right;
    }
}
</style>